import 'package:flutter/material.dart';
import 'package:wsc2022/newsDetail_page.dart';
import 'package:wsc2022/resultDetail_page.dart';

class TabView2 extends StatefulWidget {
  const TabView2({super.key});

  @override
  State<TabView2> createState() => _TabView2State();
}

class _TabView2State extends State<TabView2> {
  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.symmetric(horizontal: 20),
      child: ListView(
        padding: EdgeInsets.zero,
        children: [
          Container(
            // color: Colors.pink,
            margin: EdgeInsets.only(top: 30, bottom: 10),
            child: const Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Text(
                  'Mock data',
                  style: TextStyle(color: Color(0xFFAAAAAA)),
                ),
                Row(
                  children: [
                    Image(width: 24, image: AssetImage('images/gold.png')),
                    SizedBox(
                      width: 5,
                    ),
                    Image(width: 24, image: AssetImage('images/silver2.png')),
                    SizedBox(
                      width: 5,
                    ),
                    Image(width: 24, image: AssetImage('images/bronze.png')),
                    SizedBox(
                      width: 5,
                    ),
                    Image(width: 24, image: AssetImage('images/iron.png')),
                    SizedBox(
                      width: 15,
                    ),
                  ],
                )
              ],
            ),
          ),
          cells(
              national: 'images/banzi.png',
              country: 'Korea',
              ranking: '1',
              gold: '7',
              silver: '6',
              bronze: '2',
              iron: '26'),
          cells(
              national: 'images/taipei.png',
              country: 'Chinese Taipei',
              ranking: '2',
              gold: '5',
              silver: '5',
              bronze: '5',
              iron: '23'),
          cells(
              national: 'images/Brazil.png',
              country: 'Brazil',
              ranking: '3',
              gold: '2',
              silver: '5',
              bronze: '8',
              iron: '27'),
          cells(
              national: 'images/taipei.png',
              country: 'Chinese Taipei',
              ranking: '4',
              gold: '5',
              silver: '5',
              bronze: '5',
              iron: '23'),
          cells(
              national: 'images/taipei.png',
              country: 'Chinese Taipei',
              ranking: '5',
              gold: '5',
              silver: '5',
              bronze: '5',
              iron: '23'),
          cells(
              national: 'images/taipei.png',
              country: 'Chinese Taipei',
              ranking: '6',
              gold: '5',
              silver: '5',
              bronze: '5',
              iron: '23'),
          cells(
              national: 'images/taipei.png',
              country: 'Chinese Taipei',
              ranking: '7',
              gold: '5',
              silver: '5',
              bronze: '5',
              iron: '23'),
          cells(
              national: 'images/taipei.png',
              country: 'Chinese Taipei',
              ranking: '8',
              gold: '5',
              silver: '5',
              bronze: '5',
              iron: '23'),
          cells(
              national: 'images/taipei.png',
              country: 'Chinese Taipei',
              ranking: '9',
              gold: '5',
              silver: '5',
              bronze: '5',
              iron: '23'),
          cells(
              national: 'images/taipei.png',
              country: 'Chinese Taipei',
              ranking: '10',
              gold: '5',
              silver: '5',
              bronze: '5',
              iron: '23'),
          cells(
              national: 'images/taipei.png',
              country: 'Chinese Taipei',
              ranking: '11',
              gold: '5',
              silver: '5',
              bronze: '5',
              iron: '23'),
          cells(
              national: 'images/taipei.png',
              country: 'Chinese Taipei',
              ranking: '12',
              gold: '5',
              silver: '5',
              bronze: '5',
              iron: '23'),
          cells(
              national: 'images/taipei.png',
              country: 'Chinese Taipei',
              ranking: '13',
              gold: '5',
              silver: '5',
              bronze: '5',
              iron: '23'),
        ],
      ),
    );
  }
}

class cells extends StatelessWidget {
  const cells({
    super.key,
    required this.national,
    required this.country,
    required this.ranking,
    required this.gold,
    required this.silver,
    required this.bronze,
    required this.iron,
  });

  final String national;
  final String country;
  final String ranking;
  final String gold;
  final String silver;
  final String bronze;
  final String iron;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        Navigator.push(context, MaterialPageRoute(builder: (context) {
          return ResultDetailPage();
        }));
      },
      child: Container(
        padding: EdgeInsets.symmetric(horizontal: 15),
        margin: EdgeInsets.only(bottom: 10),
        height: 80,
        decoration: BoxDecoration(
            color: Theme.of(context).primaryColor,
            borderRadius: BorderRadius.circular(20)),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Row(
              children: [
                Image(
                  height: 44,
                  width: 65,
                  image: AssetImage(national),
                  fit: BoxFit.cover,
                ),
                SizedBox(
                  width: 15,
                ),
                Container(
                  width: 150,
                  margin: EdgeInsets.symmetric(vertical: 18),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Container(
                        alignment: Alignment.topLeft,
                        child: Text(
                          country,
                          style: TextStyle(
                              fontSize: 18, fontWeight: FontWeight.w800),
                        ),
                      ),
                      Container(
                        alignment: Alignment.topLeft,
                        child: Text('#$ranking',
                            style: TextStyle(
                                fontSize: 18,
                                fontWeight: FontWeight.w800,
                                color: Color.fromRGBO(0, 55, 100, 1))),
                      ),
                    ],
                  ),
                ),
              ],
            ),
            Container(
              width: 100,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text(
                    gold,
                    style: TextStyle(color: Color(0xFFDFBD8C), fontSize: 16),
                  ),
                  Text(
                    silver,
                    style: TextStyle(color: Color(0xFFADC3E6), fontSize: 16),
                  ),
                  Text(
                    bronze,
                    style: TextStyle(color: Color(0xFFBEA18C), fontSize: 16),
                  ),
                  Text(
                    iron,
                    style: TextStyle(color: Color(0xFFA4A4A4), fontSize: 16),
                  ),
                ],
              ),
            )
          ],
        ),
      ),
    );
  }
}
